<template>
  <div class="role-list">
    <div class="" style="height:70px;" v-show="canShow"></div>
    <div class="authority-title">
      <h2>城镇新就业人员实名登记台账表</h2>
      <svg class="all-close-btn icon-svg" v-show="!fullScreen" @click="closeAll" viewBox="0 0 612 792">
        <path :d="svgPath.closeFullScreen"/>
      </svg>
      <div class="top-right" @click="goBack">
        返回
      </div>
    </div>

    <!-- 表格主体 -->
    <div class="role-list-content" style="position:relative;">
      <!-- 头部筛选 -->
      <div class="role-list-search" style="background: linear-gradient(90deg, #23313c 0%, #1e2f43 50%, #1f304e 100%)">
        <div class="search-content">
          <input class="dap-input" type="text" v-model="searchName" maxlength="30" placeholder="疾病名称">
          <div class="search-btn">
            <span class="dap-button" @click="searchItem">搜索</span>
          </div>
          <div class="search-btn">
            <span style="margin-left:18px;" class="dap-close-button" :class="canReset?'canReset':''" @click="reset">重置</span>
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <div class="role-list-table">
        <div class="table-title"></div>
        <div class="table-content">
          <el-table
            :data="tableData"
            v-loading="loadingShow"
            element-loading-text="loading"
            element-loading-background="rgba(0, 0, 0, 0.8)"
            height="10">
            <el-table-column
              prop="number"
              width="60px"
              label="序号">
            </el-table-column>
            <el-table-column
              prop="disName"
              label="疾病名称"
              align="center"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="amoutReal"
              label="支出总金额（元）"
              align="center">
            </el-table-column>
            <el-table-column
              prop="avePayOfNum"
              label="次均支出(元)"
              align="center">
            </el-table-column>
            <el-table-column
              prop="avePayOfPerson"
              label="人均支出（元）"
              align="center">
            </el-table-column>
            <el-table-column
              prop="countOfnum"
              label="就诊人次(次）"
              align="center">
            </el-table-column>
            <el-table-column
              prop="countOfPerson"
              label="就诊人数（人）"
              align="center">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--分页-->
      <dap-page :pageTotal="total" v-on:pageSizeChange="pageSizeChange" v-on:pageCurrentChange="pageChange" :currentPage="currentPage"></dap-page>
    </div>
  </div>
</template>
<script>
  import {getDepartmentList,getSearchItems,baseApiF} from '../../../api/api'
  import {svgPath,quitFullScreen} from '../../../assets/js/utils'
  import {filterLogText} from '../../../api/authority'
  import dapPage from '../../view/dap-page.vue';
  import dapPopover from '../../view/dap-popover.vue';

  export default {
    props: ['isChange','fullScreen'],
    data () {
      return {
        canReset:true,
        svgPath:svgPath,
        canShow: true,
        searchName: '',
        tableData: [],
        totalData:[],
        currentPage: 1,
        pageSize: 20,
        total: 0,
        loadingShow:true,
        showFloating: false,
        areaTitle: '',
        hospNameTitle: '',
        medicalCategoryNameTitle: '',
        filter: null,
        propParams: {}, // 传递过来的参数
      }
    },
    components: {
      dapPage,
      dapPopover
    },
    watch: {
      isChange () {
        if (document.querySelector('.el-header')) {
          this.canShow = true;
        } else {
          this.canShow = false;
        }
      },
      searchName(val){
        if(val==''){
          this.canReset = true;
        }else{
          this.canReset = false;
        }
      }
    },
    mounted () {
      this.initData();
    },
    methods: {
      // 取消全屏
      closeAll () {
        quitFullScreen();
      },
      getData(){
        this.loadingShow = true;
        let data = {};
        data.disName = this.searchName;
        data.areaCode = this.propParams.areaCode;
        data.hospCode = this.propParams.hospCode;
        data.hospLevel = this.propParams.hospLevel;
        data.medicalCategory = this.propParams.medicalCategory;
        data.paixu = 2;
        data.queryYear = this.propParams.year;
        this.$axios.post(baseApiF()+'disexp/dislist',data).then(res=>{
          let data = res.data;
          if(data.code==0){
            data.data.disDetailList.map((item,index)=>{
              item.number = index+1;
              item.amoutReal = Number(item.amoutReal);
            })
            this.totalData = data.data.disDetailList;
            this.tableData = data.data.disDetailList.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize);
            this.total = data.data.disDetailList.length;
            this.loadingShow = false;
          }else{
            this.totalData = [];
            this.tableData = [];
            this.total = 0;
            this.loadingShow = false;
          }
        }).catch(res=>{
          this.totalData = [];
          this.tableData = [];
          this.total = 0;
          this.loadingShow = false;
        })
      },
      searchItem () {
        this.getData()
      },
      reset(){
        if(this.canReset){
          return;
        }
        this.searchName = '';
        this.getData();
      },
      // 初始化数据
      initData () {
        // 初始化数据
        let data = this.$route.query;
        this.propParams = data;
        this.propParams.year = data.queryYear;
        //获取筛选数据
        getSearchItems('init/initInput')
          .then((res) => {
            if (res.code == 0) {
              this.getData()
            }
          });
      },
      goBack () {
        // sessionStorage.setItem('isPrev','1');
        this.$router.go(-1);
      },
      pageSizeChange(val) {
        this.pageSize = val;
        // this.currentPage = 1;
        this.getData()
      },
      pageChange(val) {
        this.currentPage = val;
        // this.getData()
        this.tableData = this.totalData.slice((val-1)*this.pageSize,val*this.pageSize)
      }
    }
  }
</script>
<style scoped>
  @import '../../../assets/css/authority.css';
  .canReset{
    color:#969ca5;
    border:#313d4f solid 1px;
    cursor:not-allowed;
  }
  .canReset:hover{
    color:#969ca5;
    border:#313d4f solid 1px;
    background:none;
  }
  .top-right{
    float: right;
    margin-right: 30px;
    font-size: 16px;
    color: #1380e1;
    cursor: pointer;
  }
  .chart-title-floating{
    font-size: 12px;
    color: #fff;
    margin-left: 24px;
    width: 200px;
    line-height: 22px;
    padding: 10px;
    border-radius: 5px;
    background-color: #1a2940;
    border: 1px solid #313d4f;
    position: absolute;
    z-index: 10;
    margin-top: 54px;
  }
  .role-list {
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .role-list-content {
    margin: 30px 30px 0 30px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  /*搜索*/
  .role-list-search {
    height: 70px;
    background: linear-gradient(left, #23313c 0%, #1e2f43 50%, #1f304e 100%);
  }

  .role-list-search .search-header {
    height: 60px;
    border-bottom: 1px solid #283f59;
    display: flex;
    align-items: center;
  }

  .role-list-search .search-header > span {
    font-size: 14px;
    color: #9b9aad;
    padding-left: 8px;
  }

  .role-list-search .search-content {
    height: 70px;
    display: flex;
    align-items: center;
  }

  .role-list-search .search-content > span {
    font-size: 12px;
    padding-left: 18px;
    color: #9b9aad;
  }

  .role-list-search .search-content > input {
    margin-left: 10px;
  }

  .role-list-search .search-content .search-btn > span {
    margin-left: 42px;
  }

  /*表格*/
  .role-list-table {
    margin-top: 20px;
    background: #1b2b44;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  .role-list-table .table-title {
    height: 15px;
    background: #1b2b44;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .role-list-table .table-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }
</style>

<!--修改框架样式-->
<style>
  .item{
    cursor:pointer;
  }
  .popover-text{
    text-align: center;
    padding-top:32px;
    font-weight: normal;
  }
  .toastInfo{
    color:#fff;
  }
  .showTooltip{
    opacity:1;
  }
</style>
